<template>
  <div class="div-background-navigation">
    <div class="HomePage-nav">
      <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#1B1B1D" text-color="#fff"
        active-text-color="#218CDE" @select="handleSelect" router>
        <!-- <el-menu-item  v-for="(item,index) in homepagetitle" :key="index" :index="item.index">
        <div v-if="item.role === '4'">
          <img :src="item.img"/>
          <span>{{item.title}}</span>
        </div>
      </el-menu-item> -->
        <el-menu-item index="/HomePage" v-show="role == '1' || role == '2'">
          <img src="../assets/img/other/首页-normal.png" />
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/SimulationTasks" v-show="role == '1' || role == '2'">
          <img src="../assets/img/other/icon-任务列表-normal.png" />
          <span>实训任务</span>
        </el-menu-item>
        <el-menu-item index="/ClassManagement" v-if="role == '1'">
          <img src="../assets/img/other/icon-用户管理-normal.png" />
          <span>班级管理</span>
        </el-menu-item>
        <el-menu-item index="/ResuAlls" v-show="role == '1' || role == '2'">
          <img src="../assets/img/other/icon-数据汇总-normal.png" />
          <span>成绩报表</span>
        </el-menu-item>
        <el-menu-item index="/ProductLibrary" v-show="role == '1' || role == '2'">
          <img src="../assets/img/other/icon-Library-normal.png" />
          <span>产品库</span>
        </el-menu-item>
        <el-menu-item index="/TeachingResources" v-show="role == '1' || role == '2'">
          <img src="../assets/img/other/icon-Library-normal.png" />
          <span>教学资源</span>
        </el-menu-item>
        <el-menu-item index="/Match" v-show="role == '3' || role == '4' || role == '2'">
          <img src="../assets/img/other/icon-Library-normal.png" />
          <span>比赛</span>
        </el-menu-item>
        <!-- <el-menu-item index="/Table" v-show="role=='3'|| role=='4' || role=='2'">
            <img src="../assets/img/other/icon-Library-normal.png" />
            <span >表格</span>
          </el-menu-item> -->
      </el-menu>
      <div class="versions">{{ VersionsVal }}</div>
    </div>
    <router-view />
    <ProductUpdate></ProductUpdate>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, onMounted } from "vue";
import ProductUpdate from '@/components/produc/ProductUpdate.vue'
import bus from "@/bus.js";
export default defineComponent({
  name: "Home",
  components: {
    ProductUpdate,
  },
  setup() {
    let VersionsVal = ref()
    //标题
    // let homepagetitle = reactive([
    //   { title: "首页",index:"/HomePage",img:require("../assets/img/other/首页-normal.png"),role:2},
    //   { title: "实训任务",index:"/SimulationTasks",img:require("../assets/img/other/icon-任务列表-normal.png"),role:2},
    //   { title: "班级管理",index:"/ClassManagement",img:require("../assets/img/other/icon-用户管理-normal.png"),role:2},
    //   { title: "成绩分布",index:"/ResuAll",img:require("../assets/img/other/icon-数据汇总-normal.png"),role:2},
    //   { title: "产品库",index:"/ProductLibrary",img:require("../assets/img/other/icon-Library-normal.png"),role:2},
    //   { title: "教学资源",index:"/TeachingResources",img:require("../assets/img/other/icon-Library-normal.png"),role:2},
    //   { title: "比赛",index:"/Match",img:require("../assets/img/other/icon-Library-normal.png"),role:sessionStorage.getItem('role')},
    // ]);
    function handleSelect(key, keyPath) {
      if (key === '/Match') {
        bus.$emit("MatchPanelState", 0)
      }
    }
    let role = ref(sessionStorage.getItem('role'))
    function loadFile(name) {
      // name为文件所在位置
      let xhr = new XMLHttpRequest();
      const okStatus = document.location.protocol === "file:" ? 0 : 200;
      xhr.open("GET", name, false);
      xhr.overrideMimeType("text/html;charset=utf-8"); //默认为utf-8
      xhr.send(null);
      return xhr.status === okStatus ? xhr.responseText : null;
    }
    onMounted(() => {
      let a = loadFile("./config.txt")
      console.log('NameVersions', JSON.parse(a).Name, JSON.parse(a).Versions);
      VersionsVal.value = JSON.parse(a).Versions
    });
    return {
      // homepagetitle
      role,
      handleSelect,
      VersionsVal
    };
  },
});

</script>
<style lang="less">
.versions {
  width: 120px;
  height: 25px;
  line-height: 25px;
  font-size: 18px;
  color: white;
  position: absolute;
  bottom: 88px;
}

.div-background-navigation {
  position: relative;
  width: 1920px;
  height: 100%;
  background-color: #F5F5F5;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

.HomePage-nav {
  position: absolute;
  width: 120px;
  height: 100%;
  background: #1b1b1d;
  z-index: 1;
}

//设置导航栏大小
.HomePage-nav .el-menu-item {
  width: 100%;
  height: 120px;
  background: #1b1b1d;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
}

//导航栏图片偏离位置
.HomePage-nav .el-menu-item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;

}

//导航栏显示
.el-menu-item span {
  display: block;
}
</style>
